import React, { useMemo } from 'react'
import { Form, Input, InputNumber, Button } from 'antd'

export default function AddProductTable(props: any) {
  /**
   * 渲染表头
   * @returns
   */
  function renderHeader() {
    return props.columns.map((item: any) => (
      <th key={item.dataIndex} className={item.type}>
        {item.title}
      </th>
    ))
  }

  /**
   * 渲染行
   * @param {*} data
   * @param {*} index
   * @param {*} list
   * @returns
   */
  function renderAttrs(data: any, index: number, list: any[]) {
    const attrs = props.columns.map((item: any) => (
      <td key={`${item.dataIndex}_${index}`} className={item.type}>
        {item.render(index)}
      </td>
    ))
    return <tr key={index}>{attrs}</tr>
  }

  return (
    <table className="product-spec-table">
      <thead>
        <tr>{renderHeader()}</tr>
      </thead>
      <tbody>
        <Form.List name="attrs">{fileds => fileds.map(renderAttrs)}</Form.List>
      </tbody>
    </table>
  )
}
